<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<header class="header">
    <nav class="nav-container">
        <div class="logo">
            <h1>我的博客</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="about.html">关于我</a></li>
        </ul>
    </nav>
</header>

<main class="main-container">
    <section class="content">
        <article class="blog-post">
            <h2>欢迎来到我的博客</h2>
            <div class="post-meta">
                <span class="date"><i class="far fa-calendar"></i> 2024-03-20</span>
                <span class="category"><i class="far fa-folder"></i> 生活随笔</span>
            </div>
            <p class="post-excerpt">
                这是我的第一篇博客文章。在这里，我会分享我的想法、经验和生活点滴...
            </p>
            <a href="article.html" class="read-more">阅读更多</a>
        </article>

        <article class="blog-post">
            <h2>我的技术学习之路</h2>
            <div class="post-meta">
                <span class="date"><i class="far fa-calendar"></i> 2024-03-19</span>
                <span class="category"><i class="far fa-folder"></i> 技术分享</span>
            </div>
            <p class="post-excerpt">
                分享一下我在学习编程过程中的心得体会和遇到的挑战...
            </p>
            <a href="tech.html" class="read-more">阅读更多</a>
        </article>
    </section>

    <aside class="sidebar">
        <div class="widget">
            <h3>关于我</h3>
            <p>热爱技术，热爱生活。在这里记录我的成长历程。</p>
            <a href="about.html" class="btn">了解更多</a>
        </div>
        <div class="widget">
            <h3>分类</h3>
            <ul class="category-list">
                <li><a href="#">技术分享</a></li>
                <li><a href="#">生活随笔</a></li>
                <li><a href="#">学习笔记</a></li>
            </ul>
        </div>
    </aside>
</main>

<footer class="footer">
    <div class="footer-content">
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
        <div class="social-links">
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</footer>

<button id="back-to-top" title="返回顶部">
    <i class="fas fa-arrow-up"></i>
</button>

<script src="js/script.js"></script>
</body>
</html>